<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>jQuery第三节课 | JoMin·个人笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../../../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../../../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../../../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../../../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../../../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../../../md/css/jQuery/5、ajax.html" />
    
    
    <link rel="prev" href="../../../md/css/jQuery/3、正则表达式.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="21.4"
        data-chapter-title="jQuery第三节课"
        data-filepath="md/css/jQuery/4、jQuery第三节课.md"
        data-basepath="../../.."
        data-revision="Thu Aug 23 2018 15:14:40 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../../../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="md/css/1、css的引入方式.html">
            
                
                    <a href="../../../md/css/1、css的引入方式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        css的引入方式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2" data-path="img/gitbook的安装.html">
            
                
                    <a href="../../../img/gitbook的安装.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        gitbook的安装
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3" data-path="md/css/3、常用的标签.html">
            
                
                    <a href="../../../md/css/3、常用的标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        常用的标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4" data-path="md/css/4、表格的使用.html">
            
                
                    <a href="../../../md/css/4、表格的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                        表格的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5" data-path="md/css/5、表单.html">
            
                
                    <a href="../../../md/css/5、表单.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                        表单
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6" data-path="md/css/6、a标签的使用.html">
            
                
                    <a href="../../../md/css/6、a标签的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.</b>
                        
                        a标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="7" data-path="md/css/7、盒子模型.html">
            
                
                    <a href="../../../md/css/7、盒子模型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>7.</b>
                        
                        盒子模型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="8" data-path="md/css/8、浮动.html">
            
                
                    <a href="../../../md/css/8、浮动.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>8.</b>
                        
                        浮动
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9" data-path="md/css/9、css常见问题.html">
            
                
                    <a href="../../../md/css/9、css常见问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.</b>
                        
                        css常见问题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="10" data-path="md/css/10、位置定位.html">
            
                
                    <a href="../../../md/css/10、位置定位.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>10.</b>
                        
                        位置定位
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="11" data-path="md/css/11、阴影设置.html">
            
                
                    <a href="../../../md/css/11、阴影设置.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>11.</b>
                        
                        阴影设置
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="12" data-path="md/css/12、自定义动画.html">
            
                
                    <a href="../../../md/css/12、自定义动画.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>12.</b>
                        
                        动画
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="13" data-path="md/css/13、容器居中方法.html">
            
                
                    <a href="../../../md/css/13、容器居中方法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>13.</b>
                        
                        容器居中
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="14" data-path="md/css/移动端/移动端.html">
            
                
                    <a href="../../../md/css/移动端/移动端.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>14.</b>
                        
                        移动端
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="14.1" data-path="md/css/移动端/1、移动端第一节课.html">
            
                
                    <a href="../../../md/css/移动端/1、移动端第一节课.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>14.1.</b>
                        
                        移动端第一节课
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="14.2" data-path="md/css/移动端/2、移动端小问题.html">
            
                
                    <a href="../../../md/css/移动端/2、移动端小问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>14.2.</b>
                        
                        移动端小问题
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="15" data-path="md/css/flex布局/flex.html">
            
                
                    <a href="../../../md/css/flex布局/flex.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>15.</b>
                        
                        flex弹性盒子
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="15.1" data-path="md/css/flex布局/1、flex布局.html">
            
                
                    <a href="../../../md/css/flex布局/1、flex布局.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>15.1.</b>
                        
                        flex布局
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="16" data-path="md/css/16、fullpage的使用.html">
            
                
                    <a href="../../../md/css/16、fullpage的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>16.</b>
                        
                        fullpage的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="17" data-path="md/css/响应式布局/bootstrap.html">
            
                
                    <a href="../../../md/css/响应式布局/bootstrap.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>17.</b>
                        
                        响应式布局
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="17.1" data-path="md/css/响应式布局/1、Bootstrap.html">
            
                
                    <a href="../../../md/css/响应式布局/1、Bootstrap.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>17.1.</b>
                        
                        Bootstrap
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="17.2" data-path="md/css/响应式布局/2、媒体查询.html">
            
                
                    <a href="../../../md/css/响应式布局/2、媒体查询.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>17.2.</b>
                        
                        媒体查询
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="18" data-path="md/css/JavaScript/JavaScript.html">
            
                
                    <a href="../../../md/css/JavaScript/JavaScript.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.</b>
                        
                        JavaScript
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="18.1" data-path="md/css/JavaScript/1、JavaScript数据类型.html">
            
                
                    <a href="../../../md/css/JavaScript/1、JavaScript数据类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.1.</b>
                        
                        JS数据类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.2" data-path="md/css/JavaScript/2、数据类型的转换.html">
            
                
                    <a href="../../../md/css/JavaScript/2、数据类型的转换.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.2.</b>
                        
                        数据类型的转换
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.3" data-path="md/css/JavaScript/3、运算符.html">
            
                
                    <a href="../../../md/css/JavaScript/3、运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.3.</b>
                        
                        运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.4" data-path="md/css/JavaScript/4、赋值运算符.html">
            
                
                    <a href="../../../md/css/JavaScript/4、赋值运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.4.</b>
                        
                        赋值运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.5" data-path="md/css/JavaScript/5、比较运算符.html">
            
                
                    <a href="../../../md/css/JavaScript/5、比较运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.5.</b>
                        
                        比较运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.6" data-path="md/css/JavaScript/6、逻辑操作符.html">
            
                
                    <a href="../../../md/css/JavaScript/6、逻辑操作符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.6.</b>
                        
                        逻辑操作符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.7" data-path="md/css/JavaScript/7、条件运算符.html">
            
                
                    <a href="../../../md/css/JavaScript/7、条件运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.7.</b>
                        
                        条件运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.8" data-path="md/css/JavaScript/8、位运算符.html">
            
                
                    <a href="../../../md/css/JavaScript/8、位运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.8.</b>
                        
                        位运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.9" data-path="md/css/JavaScript/9、条件语句.html">
            
                
                    <a href="../../../md/css/JavaScript/9、条件语句.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.9.</b>
                        
                        条件语句
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.10" data-path="md/css/JavaScript/10、循环语句.html">
            
                
                    <a href="../../../md/css/JavaScript/10、循环语句.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.10.</b>
                        
                        循环语句
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.11" data-path="md/css/JavaScript/11、break和continue.html">
            
                
                    <a href="../../../md/css/JavaScript/11、break和continue.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.11.</b>
                        
                        break和continue
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.12" data-path="md/css/JavaScript/12、for循环.html">
            
                
                    <a href="../../../md/css/JavaScript/12、for循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.12.</b>
                        
                        for循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.13" data-path="md/css/JavaScript/13、多层循环.html">
            
                
                    <a href="../../../md/css/JavaScript/13、多层循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.13.</b>
                        
                        多层循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.14" data-path="md/css/JavaScript/14、for-in循环.html">
            
                
                    <a href="../../../md/css/JavaScript/14、for-in循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.14.</b>
                        
                        for-in循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.15" data-path="md/css/JavaScript/15、try-catch语句.html">
            
                
                    <a href="../../../md/css/JavaScript/15、try-catch语句.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.15.</b>
                        
                        try-catch语句
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.16" data-path="md/css/JavaScript/16、函数.html">
            
                
                    <a href="../../../md/css/JavaScript/16、函数.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.16.</b>
                        
                        函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.17" data-path="md/css/JavaScript/17、循环排序.html">
            
                
                    <a href="../../../md/css/JavaScript/17、循环排序.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.17.</b>
                        
                        循环排序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.18" data-path="md/css/JavaScript/18、es6语法.html">
            
                
                    <a href="../../../md/css/JavaScript/18、es6语法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.18.</b>
                        
                        es6语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.19" data-path="md/css/JavaScript/19、数组对象.html">
            
                
                    <a href="../../../md/css/JavaScript/19、数组对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.19.</b>
                        
                        数组对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.20" data-path="md/css/JavaScript/20、date对象.html">
            
                
                    <a href="../../../md/css/JavaScript/20、date对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.20.</b>
                        
                        date对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.21" data-path="md/css/JavaScript/21、Boolean对象.html">
            
                
                    <a href="../../../md/css/JavaScript/21、Boolean对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.21.</b>
                        
                        Boolean对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.22" data-path="md/css/JavaScript/22、数学对象.html">
            
                
                    <a href="../../../md/css/JavaScript/22、数学对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.22.</b>
                        
                        数学对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.23" data-path="md/css/JavaScript/23、对象的创建.html">
            
                
                    <a href="../../../md/css/JavaScript/23、对象的创建.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.23.</b>
                        
                        对象的创建
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="19" data-path="md/css/BOM/BOM.html">
            
                
                    <a href="../../../md/css/BOM/BOM.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.</b>
                        
                        BOM
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="19.1" data-path="md/css/BOM/1、window对象.html">
            
                
                    <a href="../../../md/css/BOM/1、window对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.1.</b>
                        
                        window对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.2" data-path="md/css/BOM/2、navigator对象.html">
            
                
                    <a href="../../../md/css/BOM/2、navigator对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.2.</b>
                        
                        navigator对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.3" data-path="md/css/BOM/3、screen对象.html">
            
                
                    <a href="../../../md/css/BOM/3、screen对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.3.</b>
                        
                        screen对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.4" data-path="md/css/BOM/4、history对象.html">
            
                
                    <a href="../../../md/css/BOM/4、history对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.4.</b>
                        
                        history对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.5" data-path="md/css/BOM/5、location对象.html">
            
                
                    <a href="../../../md/css/BOM/5、location对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.5.</b>
                        
                        location对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.6" data-path="md/css/BOM/6、cookie对象.html">
            
                
                    <a href="../../../md/css/BOM/6、cookie对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.6.</b>
                        
                        cookie对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.7" data-path="md/css/BOM/7、html5本地存储.html">
            
                
                    <a href="../../../md/css/BOM/7、html5本地存储.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.7.</b>
                        
                        html5本地存储
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="20" data-path="md/css/DOM/DOM.html">
            
                
                    <a href="../../../md/css/DOM/DOM.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.</b>
                        
                        DOM
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="20.1" data-path="md/css/DOM/1、DOM介绍.html">
            
                
                    <a href="../../../md/css/DOM/1、DOM介绍.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.1.</b>
                        
                        DOM介绍
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="20.2" data-path="md/css/DOM/2、元素对象.html">
            
                
                    <a href="../../../md/css/DOM/2、元素对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.2.</b>
                        
                        元素对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="20.3" data-path="md/css/DOM/3、DOM事件1.html">
            
                
                    <a href="../../../md/css/DOM/3、DOM事件1.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.3.</b>
                        
                        DOM事件1
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="20.4" data-path="md/css/DOM/4、DOM事件2.html">
            
                
                    <a href="../../../md/css/DOM/4、DOM事件2.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.4.</b>
                        
                        DOM事件2
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="20.5" data-path="md/css/DOM/5、移动端事件.html">
            
                
                    <a href="../../../md/css/DOM/5、移动端事件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.5.</b>
                        
                        移动端事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="20.6" data-path="md/css/DOM/6、ajax.html">
            
                
                    <a href="../../../md/css/DOM/6、ajax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.6.</b>
                        
                        ajax
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="21" data-path="md/css/jQuery/jQuery.html">
            
                
                    <a href="../../../md/css/jQuery/jQuery.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.</b>
                        
                        jQuery
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="21.1" data-path="md/css/jQuery/1、jQuery第一节课.html">
            
                
                    <a href="../../../md/css/jQuery/1、jQuery第一节课.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.1.</b>
                        
                        jQuery第一节课
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="21.2" data-path="md/css/jQuery/2、jQuery第二节课.html">
            
                
                    <a href="../../../md/css/jQuery/2、jQuery第二节课.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.2.</b>
                        
                        jQuery第二节课
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="21.3" data-path="md/css/jQuery/3、正则表达式.html">
            
                
                    <a href="../../../md/css/jQuery/3、正则表达式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.3.</b>
                        
                        正则表达式
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="21.4" data-path="md/css/jQuery/4、jQuery第三节课.html">
            
                
                    <a href="../../../md/css/jQuery/4、jQuery第三节课.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.4.</b>
                        
                        jQuery第三节课
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="21.5" data-path="md/css/jQuery/5、ajax.html">
            
                
                    <a href="../../../md/css/jQuery/5、ajax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.5.</b>
                        
                        ajax
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../../../" >JoMin·个人笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="&#x9009;&#x62E9;&#x5668;">&#x9009;&#x62E9;&#x5668;</h1>
<pre><code>        &lt;div class=&quot;web&quot;&gt;
            &#x6211;&#x662F;web&#x7684;&#x5185;&#x5BB9;
            &lt;ul class=&quot;L1&quot;&gt;
                &lt;li class=&quot;first&quot;&gt;1&lt;/li&gt;
                &lt;li class=&quot;first&quot;&gt;2&lt;/li&gt;
                &lt;li class=&quot;first&quot;&gt;3&lt;/li&gt;
                &lt;li class=&quot;second&quot;&gt;4&lt;/li&gt;
                &lt;li class=&quot;second&quot;&gt;5&lt;/li&gt;
                &lt;li class=&quot;second&quot;&gt;
                    &lt;ul class=&quot;L2&quot;&gt;
                        &lt;li&gt;1&lt;/li&gt;
                        &lt;li&gt;2&lt;/li&gt;
                        &lt;li&gt;
                            &lt;ul class=&quot;L3&quot;&gt;
                                &lt;li&gt;1&lt;/li&gt;
                                &lt;li&gt;2&lt;/li&gt;
                                &lt;li&gt;3&lt;/li&gt;
                                &lt;li&gt;4&lt;/li&gt;
                                &lt;li&gt;5&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;p&gt;12345&lt;/p&gt;
        &lt;/div&gt;
</code></pre><ul>
<li><p>add(ele):&#x5C06;&#x5143;&#x7D20;ele&#x6DFB;&#x52A0;&#x5230;&#x76EE;&#x6807;&#x5BF9;&#x8C61;&#x7684;&#x96C6;&#x5408;&#x4E2D;&#xFF0C;&#x548C;not()&#x65B9;&#x6CD5;&#x60F3;&#x6CD5;</p>
<ul>
<li>ele:&#x9009;&#x62E9;&#x5668;</li>
</ul>
</li>
<li><p>contents():&#x83B7;&#x53D6;&#x5230;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x5B50;&#x8282;&#x70B9;&#xFF0C;&#x5305;&#x62EC;&#x6587;&#x672C;&#x8282;&#x70B9;</p>
</li>
<li><p>each(func(index,item)):&#x7528;&#x4E8E;&#x904D;&#x5386;jq&#x5BF9;&#x8C61;&#x4E2D;&#x7684;&#x6BCF;&#x4E00;&#x4E2A;&#x5143;&#x7D20;</p>
<ul>
<li>func(index,item):&#x56DE;&#x8C03;&#x51FD;&#x6570;</li>
<li>index:&#x4EE3;&#x8868;&#x904D;&#x5386;&#x5BF9;&#x8C61;&#x91CC;&#x9762;&#x7684;&#x5143;&#x7D20;&#x4E0B;&#x6807;&#x503C;</li>
<li>item:&#x4EE3;&#x8868;&#x904D;&#x5386;&#x5BF9;&#x8C61;&#x91CC;&#x9762;&#x7684;&#x6BCF;&#x4E00;&#x4E2A;&#x5143;&#x7D20;</li>
</ul>
</li>
<li><p>end():&#x7EC8;&#x6B62;&#x5728;&#x5F53;&#x524D;&#x94FE;&#x7684;&#x6700;&#x65B0;&#x8FC7;&#x6EE4;&#x64CD;&#x4F5C;&#xFF0C;&#x5E76;&#x8FD4;&#x56DE;&#x5339;&#x914D;&#x7684;&#x5143;&#x7D20;&#x7684;&#x4EE5;&#x524D;&#x7684;&#x72B6;&#x6001;</p>
</li>
</ul>
<pre><code>            $(&quot;li&quot;).add(&quot;p&quot;).css(&quot;color&quot;,&quot;skyblue&quot;);
            console.log($(&quot;ul&quot;).contents());

            $(&quot;li&quot;).each(function(index,item){
                console.log(index,item);
            })

            $(&quot;ul&quot;).find(&quot;.first&quot;).css(&quot;background&quot;,&quot;pink&quot;).end().find(&quot;.second&quot;).css(&quot;background&quot;,&quot;gray&quot;);

            $(&quot;li&quot;).each(function(index,item){
                if(index&lt;3){
                    $(this).css(&quot;font-size&quot;,&quot;50px&quot;);
                }else{
                    $(this).css(&quot;font-size&quot;,&quot;20px&quot;);
                }
            })
</code></pre><ul>
<li>addBack():&#x8FD4;&#x56DE;&#x76EE;&#x6807;&#x5143;&#x7D20;(p)&#x548C;&#x7528;&#x6765;&#x67E5;&#x627E;&#x4ED6;&#x7684;&#x5143;&#x7D20;(web)</li>
</ul>
<pre><code>            $(&quot;.web&quot;).find(&quot;p&quot;).addBack().css({
                &quot;font-weight&quot;:&quot;bold&quot;,
                &quot;margin-top&quot;:&quot;50px&quot;
            });
            console.log($(&quot;.web&quot;).find(&quot;p&quot;).addBack())
            //children()&#x8FD4;&#x56DE;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x5B50;&#x5143;&#x7D20;(&#x4EC5;&#x9650;&#x513F;&#x5B50;)
            console.log($(&quot;ul&quot;).children());
            //find()&#x627E;&#x5230;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x6761;&#x4EF6;&#x7B26;&#x5408;&#x7684;&#x540E;&#x4EE3;&#x5143;&#x7D20;(&#x5B50;&#x5B59;)
            console.log($(&quot;web&quot;).find());
            //next()&#x8FD4;&#x56DE;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x4E0B;&#x4E00;&#x4E2A;&#x5144;&#x5F1F;&#x5143;&#x7D20;
            console.log($(&quot;li:first&quot;).next());
            //nextAll()&#x8FD4;&#x56DE;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x540E;&#x9762;&#x7684;&#x6240;&#x6709;&#x5144;&#x5F1F;&#x5143;&#x7D20;
            console.log($(&quot;li:nth-child(2)&quot;).nextAll());
            console.log($(&quot;li:nth-child(2)&quot;).nextAll().addBack());
</code></pre><ul>
<li>nextUntil(ele,checkEle);<ul>
<li>ele:&#x7EC8;&#x6B62;&#x6761;&#x4EF6;</li>
<li>checkEle:&#x8981;&#x5339;&#x914D;&#x7684;&#x5185;&#x5BB9;</li>
<li>&#x4ED6;&#x4EEC;&#x90FD;&#x662F;&#x4EE3;&#x8868;&#x4E00;&#x4E2A;&#x9009;&#x62E9;&#x5668;</li>
</ul>
</li>
</ul>
<pre><code>$(&quot;li:nth-child(2)&quot;).nextUntil(&quot;li:nth-child(4)&quot;,&quot;li&quot;).css(&quot;font-style&quot;,&quot;oblique&quot;);
</code></pre><ul>
<li>parent()&#x627E;&#x5230;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x7236;&#x7EA7;&#x5143;&#x7D20;</li>
<li>parents()&#x627E;&#x5230;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x7956;&#x5148;&#x5143;&#x7D20;</li>
<li>parentsUntil(el,checkEl)<ul>
<li>el:&#x7EC8;&#x6B62;&#x6761;&#x4EF6;</li>
<li>checkEl:&#x9700;&#x8981;&#x67E5;&#x627E;&#x7684;&#x7956;&#x5B97;&#x5143;&#x7D20;</li>
<li>&#x4ED6;&#x4EEC;&#x90FD;&#x4EE3;&#x8868;&#x9009;&#x62E9;&#x5668;</li>
</ul>
</li>
</ul>
<pre><code>            console.log($(&quot;li&quot;).parent());
            console.log($(&quot;li&quot;).parents());

            console.log($(&quot;.L3 li&quot;).parentsUntil(&quot;.L1&quot;,&quot;ul&quot;));
</code></pre><ul>
<li>prev()&#x67E5;&#x627E;&#x5230;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x524D;&#x9762;&#x7684;&#x90A3;&#x4E00;&#x4E2A;&#x5144;&#x5F1F;&#x5143;&#x7D20;</li>
</ul>
<pre><code>            console.log($(&quot;.L3 li:nth-child(3)&quot;).prev())
            //&#x53EA;&#x627E;&#x5230;&#x7B2C;&#x4E09;&#x548C;&#x7B2C;&#x56DB;&#x4E2A;li&#x5143;&#x7D20;
            console.log($(&quot;.L3 li:last-child&quot;).prevUntil(&quot;.L1 li:nth-child(2)&quot;,&quot;li&quot;));
            //&#x627E;&#x5230;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x4E4B;&#x524D;&#x7684;&#x6240;&#x6709;&#x5144;&#x5F1F;&#x5143;&#x7D20;&#xFF0C;&#x4E0D;&#x5305;&#x62EC;&#x81EA;&#x5DF1;
            console.log($(&quot;li:last-child&quot;).prevAll());
            //siblings()&#x627E;&#x5230;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x5144;&#x5F1F;&#x5143;&#x7D20;&#xFF0C;&#x5305;&#x62EC;&#x81EA;&#x5DF1;
            console.log($(&quot;li:first&quot;).siblings());
</code></pre><h1 id="&#x64CD;&#x4F5C;">&#x64CD;&#x4F5C;</h1>
<pre><code>        &lt;ul&gt;
            &lt;li&gt;&lt;a&gt;&#x9996;&#x9875;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;&#x9996;&#x9875;2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;&#x9996;&#x9875;3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;&#x9996;&#x9875;4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;&#x6211;&#x662F;p&#x6807;&#x7B7E;&lt;/p&gt;
        &lt;div class=&quot;test&quot;&gt;&#x6211;&#x662F;div&lt;/div&gt;
        &lt;div class=&quot;one&quot;&gt;
            &lt;div class=&quot;two&quot;&gt;&#x6211;&#x662F;one-div&#x91CC;&#x9762;&#x7684;&#x5B50;&#x6807;&#x7B7E;&lt;/div&gt;
        &lt;/div&gt;
        &lt;h2&gt;
            &lt;span&gt;&#x6211;&#x662F;span1&lt;/span&gt;
            &lt;span&gt;&#x6211;&#x662F;span2&lt;/span&gt;
        &lt;/h2&gt;
</code></pre><ul>
<li>clone(bool,deepBool):&#x514B;&#x9686;<ul>
<li>bool:&#x8868;&#x793A;&#x662F;&#x5426;&#x4F1A;&#x590D;&#x5236;&#x5143;&#x7D20;&#x4E0A;&#x7684;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x51FD;&#x6570;&#xFF0C;&#x9ED8;&#x8BA4;&#x4E3A;false&#x3002;</li>
<li>deepBool:(&#x9ED8;&#x8BA4;&#x548C;&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;bool&#x76F8;&#x540C;)&#xFF0C;&#x662F;&#x5426;&#x514B;&#x9686;&#x5143;&#x7D20;&#x4E0A;&#x7684;&#x52A8;&#x6001;&#x6570;&#x636E;&#x3002;</li>
<li>&#x56E0;&#x6B64;&#xFF1A;clone(true)     =(&#x76F8;&#x5F53;&#x4E8E;)&gt;       clone(true,true)</li>
<li>clone(false)     =&gt;       clone(false,false) =&gt; clone()</li>
<li>clone(true,false) =&gt; &#x53EF;&#x4EE5;&#x590D;&#x5236;&#x4E8B;&#x4EF6;&#xFF0C;&#x4F46;&#x4E0D;&#x80FD;&#x590D;&#x5236;&#x52A8;&#x6001;&#x6570;&#x636E;</li>
</ul>
</li>
</ul>
<pre><code>            $(&quot;li:first a&quot;).on(&quot;click&quot;,function(){
                $(&quot;li:first a&quot;).data(&quot;idx&quot;,&quot;1&quot;);
                console.log($(&quot;li:first a&quot;).data(&quot;idx&quot;));
            })
            var first_clone = $(&quot;li:first&quot;).clone();
            $(&quot;ul&quot;).append(first_clone);
//            console.log(first_clone.find(&quot;a&quot;).data(&quot;idx&quot;));
//            console.log($(&quot;li:first a&quot;).data(&quot;idx&quot;));

            var first_clone1 = $(&quot;li:first&quot;).clone(true);
            $(&quot;ul&quot;).append(first_clone1);
//            console.log(first_clone1.find(&quot;a&quot;).data(&quot;idx&quot;));
</code></pre><ul>
<li>oldEle.wrap(newEle),&#x7528;newEle&#x5143;&#x7D20;&#x5305;&#x88F9;oldEle&#x5143;&#x7D20;</li>
<li>wrapAll(newEle):&#x83B7;&#x53D6;&#x5230;&#x7684;jq&#x5BF9;&#x8C61;&#x96C6;&#x5408;&#x7528;&#x4E00;&#x4E2A;newEle&#x5143;&#x7D20;&#x5305;&#x88F9;&#x8D77;&#x6765;</li>
<li>oldEle.wrapInner(newEle)<ul>
<li>newEle&#x5143;&#x7D20;&#x63D2;&#x5165;&#x5230;oldEle&#x91CC;&#x9762;</li>
<li>oldEle&#x539F;&#x6765;&#x7684;&#x5B50;&#x5143;&#x7D20;&#x6210;&#x4E3A;newEle&#x7684;&#x5B50;&#x5143;&#x7D20;</li>
</ul>
</li>
</ul>
<pre><code>            $(&quot;p&quot;).wrap($(&quot;&lt;div&gt;&quot;));

//            $(&quot;li&quot;).wrap(function(index){
//                console.log(index);
//                return $(&quot;&lt;div&gt;&quot;);
//            })

            $(&quot;li&quot;).wrapAll($(&quot;&lt;div&gt;&quot;));

            $(&quot;li&quot;).wrapInner($(&quot;&lt;span&gt;&quot;));
</code></pre><ul>
<li>oldE.append(newE),&#x5C06;newE&#x5143;&#x7D20;&#x63D2;&#x5165;&#x5230;oldE&#x5143;&#x7D20;&#x91CC;&#x9762;&#x7684;&#x6700;&#x540E;&#x9762;</li>
<li>newE.appendTo(oldE),&#x5C06;newE&#x5143;&#x7D20;&#x63D2;&#x5165;&#x5230;oldE&#x5143;&#x7D20;&#x91CC;&#x9762;&#x7684;&#x6700;&#x540E;&#x9762;</li>
<li><p>&#x4E24;&#x8005;&#x7528;&#x6CD5;&#x4E00;&#x6837;&#xFF0C;&#x5DEE;&#x522B;&#x5728;&#x4E8E;&#x8BED;&#x6CD5;&#x4E0D;&#x4E00;&#x6837;</p>
</li>
<li><p>prepend(),&#x5C06;&#x5185;&#x5BB9;&#x63D2;&#x5165;&#x5230;&#x5143;&#x7D20;&#x91CC;&#x9762;&#x7684;&#x6700;&#x524D;&#x9762;</p>
</li>
<li>prependTo(),&#x5C06;&#x5185;&#x5BB9;&#x63D2;&#x5165;&#x5230;&#x5143;&#x7D20;&#x91CC;&#x9762; &#x7684;&#x6700;&#x524D;&#x9762;</li>
<li>&#x4E24;&#x8005;&#x7528;&#x6CD5;&#x4E00;&#x6837;&#xFF0C;&#x5DEE;&#x522B;&#x5728;&#x4E8E;&#x8BED;&#x6CD5;&#x4E0D;&#x4E00;&#x6837;</li>
</ul>
<pre><code>            $(&quot;p&quot;).append($(&quot;&lt;span&gt;&quot;));
            $(&quot;&lt;i&gt;&quot;).appendTo($(&quot;p&quot;));

            $(&quot;p&quot;).prepend($(&quot;&lt;em&gt;&quot;));
            $(&quot;&lt;strong&gt;&quot;).prependTo($(&quot;p&quot;));
</code></pre><ul>
<li>html(),&#x83B7;&#x53D6;&#x6216;&#x8005;&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5185;&#x5BB9;&#x3002;&#x8BC6;&#x522B;&#x6807;&#x7B7E;</li>
<li>text(),&#x83B7;&#x53D6;&#x6216;&#x8005;&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5185;&#x5BB9;&#x3002;&#x4E0D;&#x8BC6;&#x522B;&#x6807;&#x7B7E;</li>
</ul>
<pre><code>            console.log($(&quot;p&quot;).html());
            $(&quot;i&quot;).html(&quot;&#x6211;&#x662F;&lt;strong&gt;i&lt;/strong&gt;&#x6807;&#x7B7E;&quot;);
            console.log($(&quot;p&quot;).text());
            $(&quot;i&quot;).text(&quot;&#x6211;&#x662F;&#x91CD;&#x65B0;&#x8BBE;&#x7F6E;&#x7684;&#x5185;&#x5BB9;&quot;);
</code></pre><ul>
<li>after()&#x5C06;&#x5143;&#x7D20;&#x63D2;&#x5165;&#x5230;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x540E;&#x9762;</li>
<li>before()&#x5C06;&#x5143;&#x7D20;&#x63D2;&#x5165;&#x5230;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x524D;&#x9762;</li>
<li>insertAfter()&#x548C;after&#x529F;&#x80FD;&#x76F8;&#x540C;&#xFF0C;&#x8BED;&#x6CD5;&#x4E0D;&#x540C;</li>
<li>insertBefore()before&#x529F;&#x80FD;&#x76F8;&#x540C;&#xFF0C;&#x8BED;&#x6CD5;&#x4E0D;&#x540C;</li>
</ul>
<pre><code>$(&quot;p&quot;).after($(&quot;&lt;p&gt;&quot;));
            $(&quot;p:nth-child(1)&quot;).before($(&quot;&lt;p&gt;&quot;));

            $(&quot;&lt;div&gt;&#x6211;&#x63D2;&#x5165;&#x5230;&#x4E86;p&#x6807;&#x7B7E;&#x540E;&#x9762;&lt;/div&gt;&quot;).insertAfter($(&quot;p&quot;));
            $(&quot;&lt;div&gt;&#x6211;&#x63D2;&#x5165;&#x5230;&#x4E86;p&#x6807;&#x7B7E;&#x524D;&#x9762;&lt;/div&gt;&quot;).insertBefore($(&quot;p&quot;));
</code></pre><ul>
<li>detach():&#x79FB;&#x9664;&#x76EE;&#x6807;&#x5143;&#x7D20;&#xFF0C;&#x5E76;&#x8FD4;&#x56DE;&#x8BE5;&#x5143;&#x7D20;</li>
</ul>
<pre><code>            var test =  $(&quot;.test&quot;).detach();
            console.log(test);
            //&#x5220;&#x9664;&#x5339;&#x914D;&#x5230;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;li&#x5143;&#x7D20;
            $(&quot;li&quot;).detach(&quot;li:nth-child(1)&quot;);
</code></pre><ul>
<li>empty()&#x5220;&#x9664;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x5B50;&#x8282;&#x70B9;&#xFF0C;&#x8FD4;&#x56DE;&#x8BE5;&#x76EE;&#x6807;&#x5143;&#x7D20;</li>
<li>remove()&#x79FB;&#x9664;&#x76EE;&#x6807;&#x5143;&#x7D20;&#xFF0C;&#x6570;&#x636E;&#x548C;&#x4E8B;&#x4EF6;&#x90FD;&#x4F1A;&#x5220;&#x9664;&#x6389;&#xFF08;detach&#x4E0D;&#x4F1A;&#xFF09;</li>
</ul>
<pre><code>            var ul = $(&quot;ul&quot;).empty();
            console.log(ul);

            $(&quot;p:nth-of-type(1)&quot;).remove();
</code></pre><ul>
<li>unwrap()&#x5220;&#x9664;&#x7236;&#x7EA7;&#x5143;&#x7D20;&#xFF0C;&#x4FDD;&#x7559;&#x81EA;&#x8EAB;&#x548C;&#x5144;&#x5F1F;</li>
</ul>
<pre><code>$(&quot;.two&quot;).unwrap();
</code></pre><ul>
<li>replaceAll()&#x66FF;&#x6362;&#x6240;&#x6709;&#x76EE;&#x6807;&#x5143;&#x7D20;</li>
<li>replaceWith()&#x66FF;&#x6362;&#x6240;&#x6709;&#x76EE;&#x6807;&#x5143;&#x7D20;,&#x5E76;&#x4E14;&#x8FD4;&#x56DE;&#x88AB;&#x5220;&#x9664;&#x5143;&#x7D20;&#x7684;&#x96C6;&#x5408;</li>
</ul>
<pre><code>$(&quot;&lt;h1&gt;123&lt;/h1&gt;&quot;).replaceAll($(&quot;.two&quot;));//&#x628A;&lt;div class=&quot;two&quot;&gt;&#x6211;&#x662F;one-div&#x91CC;&#x9762;&#x7684;&#x5B50;&#x6807;&#x7B7E;&lt;/div&gt;&#x66FF;&#x6362;&#x6210;&lt;h1&gt;123&lt;/h1&gt;

$(&quot;h1&quot;).replaceWith(&quot;&lt;div class=&apos;two&apos;&gt;&#x6211;&#x53C8;&#x56DE;&#x6765;&#x4E86;&lt;/div&gt;&quot;);
</code></pre><ul>
<li>&#x4E8B;&#x4EF6;&#x4EE3;&#x7406;<ul>
<li>on(type,target,func)</li>
<li>type:&#x4E8B;&#x4EF6;&#x7C7B;&#x578B;</li>
<li>target:&#x70B9;&#x51FB;&#x7684;&#x76EE;&#x6807;&#x5143;&#x7D20;</li>
<li>func:&#x56DE;&#x8C03;&#x51FD;&#x6570;</li>
</ul>
</li>
</ul>
<pre><code>$(&quot;h2&quot;).on(&quot;click&quot;,&quot;span&quot;,function(){
    console.log($(this));
})
</code></pre><h1 id="&#x61D2;&#x52A0;&#x8F7D;">&#x61D2;&#x52A0;&#x8F7D;</h1>
<pre><code>&lt;img src=&quot;img/5.jpg&quot;/&gt;
        &lt;img src=&quot;img/5.jpg&quot;/&gt;
        &lt;img src=&quot;img/5.jpg&quot;/&gt;
        &lt;img class=&quot;lazyload&quot; data-src=&quot;img/5.jpg&quot;/&gt;
        &lt;img class=&quot;lazyload&quot; data-src=&quot;img/5.jpg&quot;/&gt;
        &lt;img class=&quot;lazyload&quot; data-src=&quot;img/5.jpg&quot;/&gt;
        &lt;img class=&quot;lazyload&quot; data-src=&quot;img/5.jpg&quot;/&gt;
        &lt;img class=&quot;lazyload&quot; data-src=&quot;img/5.jpg&quot;/&gt;
        &lt;img class=&quot;lazyload&quot; data-src=&quot;img/5.jpg&quot;/&gt;
        &lt;img class=&quot;lazyload&quot; data-src=&quot;img/5.jpg&quot;/&gt;
</code></pre><pre><code>        &lt;style type=&quot;text/css&quot;&gt;
            body{
                text-align: center;
            }
            img{
                width: 481px;
                height: 300px;

            }
            .lazyload{
                opacity: 0;
                transition: 1s;
            }
        &lt;/style&gt;
</code></pre><ul>
<li>1&#x3001;&#x6D4F;&#x89C8;&#x5668;&#x53EF;&#x89C6;&#x9AD8;&#x5EA6;</li>
<li>2&#x3001;&#x6587;&#x6863;&#x6EDA;&#x5230;&#x6D4F;&#x89C8;&#x5668;&#x5916;&#x7684;&#x9AD8;&#x5EA6;</li>
<li>3&#x3001;&#x56FE;&#x7247;&#x76F8;&#x5BF9;&#x6587;&#x6863;&#x9876;&#x90E8;&#x7684;&#x9AD8;&#x5EA6;</li>
</ul>
<pre><code>            var winH = $(window).innerHeight();
            console.log(winH)
            $(&quot;.lazyload&quot;).load(function(){
                if($(&quot;.lazyload&quot;).prop(&quot;src&quot;)){
                    $(this).css(&quot;opacity&quot;,1);
                }
            })
            $(document).scroll(function(){
                var scrT = $(this).scrollTop();
//                console.log(scrT)
                $(&quot;.lazyload&quot;).each(function(index,item){
                    var imgT = $(this).offset().top;
//                    console.log(imgT);
                    if(imgT - scrT - winH&lt;-50){
                        console.log(&quot;&#x51FA;&#x73B0;&#x4E86;&quot;);
                        var _str = $(this).data(&quot;src&quot;);
                        if(!$(this).prop(&quot;src&quot;)){
                            $(this).prop(&quot;src&quot;,_str);
                        }
                    }
                })
            })
</code></pre><h1 id="&#x4E8B;&#x4EF6;">&#x4E8B;&#x4EF6;</h1>
<ul>
<li>ready():&#x5F53;DOM&#x51C6;&#x5907;&#x5C31;&#x7EEA;&#x7684;&#x65F6;&#x5019;&#x6765;&#x89E6;&#x53D1;</li>
</ul>
<pre><code>            //&#x4E0B;&#x9762;&#x4E24;&#x79CD;&#x5199;&#x6CD5;&#x6548;&#x679C;&#x76F8;&#x540C;
            $(document).ready(function(){                
                var imgH = document.querySelector(&quot;img&quot;);
                console.log(imgH.offsetHeight);
            })

            $(function(){
                var imgH = document.querySelector(&quot;img&quot;);
                console.log(imgH.offsetHeight);
            })
</code></pre><ul>
<li><p>one():&#x53EA;&#x80FD;&#x89E6;&#x53D1;&#x4E00;&#x6B21;&#x4E8B;&#x4EF6;</p>
<pre><code>  $(&quot;img&quot;).one(&quot;click&quot;,function(){
      console.log(123)
  })
</code></pre></li>
<li><p>hover(func1,func2)    </p>
<ul>
<li>func1:&#x4EE3;&#x8868;&#x9F20;&#x6807;&#x79FB;&#x5165;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;</li>
<li>func2:&#x4EE3;&#x8868;&#x9F20;&#x6807;&#x79FB;&#x51FA;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;</li>
</ul>
</li>
</ul>
<pre><code>$(&quot;img&quot;).hover(function(){
                $(this).css({
                    &quot;transform&quot;:&quot;scale(1.5)&quot;,
                    &quot;transition&quot;:&quot;1s&quot;
                    });
            },function(){
                $(this).css({
                    &quot;transform&quot;:&quot;scale(1)&quot;,
                    &quot;transition&quot;:&quot;1s&quot;
                })
            })
</code></pre>
                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../../../md/css/jQuery/3、正则表达式.html" class="navigation navigation-prev " aria-label="Previous page: 正则表达式"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../../../md/css/jQuery/5、ajax.html" class="navigation navigation-next " aria-label="Next page: ajax"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../../../gitbook/app.js"></script>

    
    <script src="../../../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../../../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../../../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../../../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../../../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
